學習 CSS 時知道盡量不使用 ID 來指定樣式，因一個 ID 只能放在一個元素上，無法像 class 一樣可以重複使用，也因 ID 權重較高，若要修改較難覆蓋

看到這篇文章有探討關於是否使用 ID 以及如何選擇 CSS 選擇器，讓我對為什麼 ID 在 CSS 可能出現問題有多些瞭解，而不是只記住不使用 ID
原文為 Why IDs Can be Problematic in CSS

因目前都是自己練習網頁，網頁的規模都不算大，很多都還在體會中，或還沒體會到 XD 這裡就紀錄幾個文章部分內容節錄：

• 使用 OOCSS 的方法以結構與樣式分開、容器與內容分開為原則，可以減少許多重複的 CSS 樣式，讓規模較大的網頁 CSS 較好維護，也因使用此方法，很少需要唯一一個地方設定唯一的樣式，在這時候使用 ID 就可能產生需要覆蓋樣式的問題，因此在這個原則下避免使用 ID 是正確的
• 類似想規模化，就需標準化的概念，當網站越來越大，CSS 追求一致化的風格時，也會傾向使用重複性較高的 class，但有時會只鼓勵避免使用 ID，但沒有了解背後的原因，造成對 ID 的使用上不了解
• 在未有 HTML5 語意化標籤，像是 <header> <main> <footer> 等，這時使用 ID 來讓結構較有語意是可以的，例如 <div id=”footer”> … </div>，可以避免使用很多的 class 和 !important 來宣告樣式，但現在幾乎都已使用 HTML5 標籤，加上許多元件化的樣式，因此較依賴 class 指定樣式
• 同時 ID 也具有「錨點」的功能，加上 id 的區塊可以將網頁的重點摘要，讓使用者點擊後可快速到達想閱覽的部分，像是：點擊 footer 的連結可跳至 footer 部分

<a href="#footer">footer</a> 

<footer id=”footer”> … </footer>

• 雖然無法寫出同時可重複使用、一致化、易於維護又易讀的 CSS（這聽起來真的很難 XD）但是仍須往此方向努力 ，因此文章強調需思考自己專案的需求，來決定是否使用某種規則，而不是將一樣的規則都套用在所有不同情況的 CSS 中

作者也分享如何選擇較正確的 CSS 選取器，主要依照可維護性、性能、權重概念及解析 CSS 來思考要使用哪種選取器

• 可維護性可以思考更改內容需要花費多少時間及心力、新開發人員需要花多少時間熟悉、許多人同時開發時是否容易有衝突產生，在考慮可維護性的情況下，樣式應該將盡量容易被覆蓋修改
• 效能改善就能讓使用者跳出率下降，提升使用者體驗，達到 SEO 優化，因此是優化網站的主要目標，不過 CSS 選擇器的性能優化會是較不重要的，因改善像是網頁載入速度等其他地方會得到更大的效益，CSS 可以注意是否有像是引入 Bootstrap 框架的全部的內容，卻只使用到少部分樣式
• 也需注意權重的部分（ * < HTML 標籤 < class < ID < lnline selectors < !impoartant )，權重的值分別為 （ 0 < 1 < 10 < 100 < 1000 < 10000 ），若是權重分數相同時，後者會覆蓋前者，在 HTML 中的 inline selectors，例如 <h1 style="color: #ffffff;"> ... </h1> ，會覆蓋所有外部 CSS 檔的樣式，除了 !important，像是 * 全域設定或是屬性值為 inherit，繼承父元素屬性的權重都是 0 分
• 因 CSS 解析過程會從最右到左讀取選取器，因此 CSS 的階層盡量不要太多層，選取器越少越好

參考資料：
Why IDs Can be Problematic in CSS